<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>360卫士</title>
  <script> (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); function setRemUnit() { var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + "px"; } setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function (e) { if (e.persisted) { setRemUnit(); } }); if (dpr >= 2) { var fakeBody = document.createElement("body"); var testElement = document.createElement("div"); testElement.style.border = ".5px solid transparent"; fakeBody.appendChild(testElement); docEl.appendChild(fakeBody); if (testElement.offsetHeight === 1) { docEl.classList.add("hairlines"); } docEl.removeChild(fakeBody); } })(window, document); </script>
  <link rel="stylesheet" href="./lib/swiper/css/swiper.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="view">

    <header class="index_header">
      <a href="#" class="logo">
        <img src="./imgs/t01ecc3b6b24e7bdbd8.png" alt="">
      </a>
      <a href="#" class="header_menu">
        <img src="./imgs/t010fa93a99715aad32.png" alt="">
      </a>
    </header>
    <div class="index_swiper_row swiper-container">
      <div class="main_menu hidden">
        <a href="#" class="menu_item">智能硬件</a>
        <a href="#" class="menu_item">用户服务</a>
        <a href="#" class="menu_item">用户服务</a>
        <a href="#" class="menu_item">企业服务</a>
        <a href="#" class="menu_item">360商城</a>
        <a href="#" class="menu_item">手机游戏</a>
        <a href="#" class="menu_item">论坛</a>
        <a href="#" class="menu_item">社会招聘</a>
        <a href="#" class="menu_item">校园招聘</a>
      </div>
      <div class="index_swiper swiper-wrapper">
        <a href="#" class="swiper_item swiper-slide"> <img src="./imgs/t01dd057241efdad2ad.png" alt=""> </a>
        <a href="#" class="swiper_item swiper-slide"> <img src="./imgs/t014b89599dc58e7974.jpg" alt=""> </a>
        <a href="#" class="swiper_item swiper-slide"> <img src="./imgs/t0112454b2ad89460e8.png" alt=""> </a>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <nav class="index_nav">
      <a href="#"><img src="./imgs/t01f222be1309c2fd7f.png" alt="">全部产品</a>
      <a href="#"><img src="./imgs/t01d7427e1f6239b1b1.png" alt="">全部产品</a>
      <a href="#"><img src="./imgs/t01235788f8980fb490.png" alt="">全部产品</a>
      <a href="#"><img src="./imgs/t0192c6a682125e6cc9.png" alt="">全部产品</a>
    </nav>
    <div class="line"></div>

    <div class="phone_software">
      <div class="phone_software_title">手机软件</div>
      <div class="phone_software_content">
        <a href="#" class="software_item"><img src="./imgs/weishi_60.png" alt="">
          <div class="software_name">手机卫士</div>
          <div class="softsize">8.95M</div>
          <div class="softdownload">下载</div>
        </a>
        <a href="#" class="software_item"><img src="./imgs/Box_60.png" alt="">
          <div class="software_name">手机助手</div>
          <div class="softsize">6.5M</div>
          <div class="softdownload">下载</div>
        </a>
        <a href="#" class="software_item"><img src="./imgs/t01c5bfd5968d038a63.png" alt="">
          <div class="software_name">浏览器</div>
          <div class="softsize">23.16M</div>
          <div class="softdownload">下载</div>
        </a>
        <a href="#" class="software_item"><img src="./imgs/t015eebd58e3c9362f7.png" alt="">
          <div class="software_name">清理大师</div>
          <div class="softsize">5.8M</div>
          <div class="softdownload">下载</div>
        </a>
        <a href="#" class="software_item">
          <img src="./imgs/t01e2a809acc329ae82.png" alt="">
          <div class="software_name">影视大全</div>
          <div class="softsize">20.7M</div>
          <div class="softdownload">下载</div>
        </a>
        <a href="#" class="software_item">
          <img src="./imgs/t01ac094f0e7138f4c1.png" alt="">
          <div class="software_name">省电王</div>
          <div class="softsize">2.8M</div>
          <div class="softdownload">下载</div>
        </a>
        <a href="#" class="software_item">
          <img src="./imgs/t01e4c126e44c6e0e47.png" alt="">
          <div class="software_name">免费WIFI</div>
          <div class="softsize">3.8M</div>
          <div class="softdownload">下载</div>
        </a>
        <a href="#" class="software_item">
          <img src="./imgs/t015c4a525a2379d9f6.png" alt="">
          <div class="software_name">ROOT</div>
          <div class="softsize">4.8M</div>
          <div class="softdownload">下载</div>
        </a>
      </div>
      <div class="phone_software_others">
        <ul class="text-ul">
          <li>
            <div class="box">
              <div>
                <a href="#">
                  <img src="./imgs/t01dc430e8c4fbc2aee.png" alt="">
                  360搜索
                </a>
              </div>
            </div>
          </li>

          <li>
            <div class="box">
              <div>
                <a href="#">
                  <img src="./imgs/t01eb2fa39da7e4001c.png" alt="">
                  会员商城
                </a>
              </div>
            </div>
          </li>
          <li>
            <div class="box">
              <div>
                <a href="#">
                  <img src="./imgs/t01f9b7903b471806d0.png" alt="">
                  手机专家
                </a>
              </div>
            </div>
          </li>
          <li>
            <div class="box">
              <div>
                <a href="#">
                  <img src="./imgs/t01946e38139012bf1a.png" alt="">
                  流量卫士
                </a>
              </div>
            </div>
          </li>
          <li>
            <div class="box">
              <div>
                <a href="#">
                  <img src="./imgs/t01a03df1ddec4c9046.png" alt="">
                  360天气
                </a>
              </div>
            </div>
          </li>

          <li>
            <div class="box">
              <div>
                <a href="#">
                  <img src="./imgs/t01a1539e3423346062.png" alt="">
                  360金融
                </a>
              </div>
            </div>
          </li>

          <li>
            <div class="box">
              <div>
                <a href="#">
                  <img src="./imgs/t01bccedbc0d45dd194.png" alt="">
                  360借条
                </a>
              </div>
            </div>
          </li>
          <li>
            <div class="box">
              <div>
                <a href="#">
                  <img src="./imgs/t01dfc013c7b3c21ac3.png" alt="">
                  信用卫士
                </a>
              </div>
            </div>
          </li>
          <li>
            <div class="box">
              <div>
                <a href="#">
                  <img src="./imgs/t01c4239d3c1e617adf.png" alt="">
                  贷款神器
                </a>
              </div>
            </div>
          </li>
          <li>
            <div class="box">
              <div>
                <a href="#">
                  <img src="./imgs/t01cbde8755c0c23978.jpg" alt="">
                  安全客
                </a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="line"></div>
    <div class="hardware">
      <div class="hardware_title">智能硬件</div>
      <div class="hardware_content">
        <ul>
          <li> <a href="#" class="hardware_item">
              <div class="hardware_name">360家庭防火墙路由器5S</div>
              <div class="hardware_des">为家守护的黑科技路由</div>
              <div class="hardware_price">199元</div> <img src="./imgs/t01c197fe3ac30ff1ef.png" alt="">
            </a></li>
          <li>
            <a href="#" class="hardware_item">
              <div class="hardware_name">360AI音箱MAX－M1</div>
              <div class="hardware_des">澎湃音质 双重智能</div>
              <div class="hardware_price">199元</div> <img src="./imgs/t013329bb6b92d78417.png" alt="">
            </a></li>
          <li>

            <a href="#" class="hardware_item">
              <div class="hardware_name">360可视门铃</div>
              <div class="hardware_des">家庭安全的最佳守门员</div>
              <div class="hardware_price">349元</div> <img src="./imgs/t0196759c96bd031f8f.png" alt="">
            </a></li>
          <li> <a href="#" class="hardware_item">
              <div class="hardware_name">360扫地机器人S7</div>
              <div class="hardware_des">扫拖一体 AI智能新升级</div>
              <div class="hardware_price">1799元</div> <img src="./imgs/t0181d5733b6dc321ba.png" alt="">
            </a></li>
          <li> <a href="#" class="hardware_item">
              <div class="hardware_name">360儿童安全座椅智能头等舱</div>
              <div class="hardware_des">适合约9个月—12岁宝宝</div>
              <div class="hardware_price">1980元</div> <img src="./imgs/t010d9a0f282c75a188.png" alt="">
            </a></li>
          <li> <a href="#" class="hardware_item">
              <div class="hardware_name">360儿童手表8X</div>
              <div class="hardware_des">超强续航的4G视频电话手表</div>
              <div class="hardware_price">399元</div> <img src="./imgs/t012a3289c21c303a14.png" alt="">
            </a></li>
          <li> <a href="#" class="hardware_item">
              <img src="./imgs/t01f8ae6ea3d7f727ff.png" alt="">
            </a></li>
        </ul>
      </div>


    </div>
    <div class="user_service others_service ">
      <div class="user_service_title others_service_title">用户服务</div>
      <div class="user_service_content others_service_content">
        <a href="#" class="user_service_item others_service_item">360搜索</a>
        <a href="#" class="user_service_item others_service_item">360导航</a>
        <a href="#" class="user_service_item others_service_item">360金融</a>
        <a href="#" class="user_service_item others_service_item">360新闻</a>
        <a href="#" class="user_service_item others_service_item">360影视</a>
        <a href="#" class="user_service_item others_service_item">360贷款神器</a>
        <a href="#" class="user_service_item others_service_item">360信用卫士</a>
        <a href="#" class="user_service_item others_service_item">安全客</a>
        <a href="#" class="user_service_item others_service_item">安全教育</a>
      </div>
    </div>
    <div class="line"></div>
    <div class="company_service others_service ">
      <div class="company_service_title others_service_title">企业安全</div>
      <div class="company_service_content others_service_content">
        <a href="#" class="company_service_item others_service_item">大数据安全</a>
        <a href="#" class="company_service_item others_service_item">边界安全</a>
        <a href="#" class="company_service_item others_service_item">终端安全</a>
        <a href="#" class="company_service_item others_service_item">内容安全</a>
        <a href="#" class="company_service_item others_service_item">网站安全</a>
        <a href="#" class="company_service_item others_service_item">移动安全</a>
        <a href="#" class="company_service_item others_service_item">云安全</a>
        <a href="#" class="company_service_item others_service_item">无线安全</a>
        <a href="#" class="company_service_item others_service_item">代码安全</a>
        <a href="#" class="company_service_item others_service_item">工业安全</a>
        <a href="#" class="company_service_item others_service_item">攻防实训</a>
      </div>
    </div>

    <div class="btm_search">
      <div class="search_wrap">
        <input type="search" placeholder="搜一下">
      </div>
      <button class="btn_search">搜一下</button>
    </div>

    <div class="index_links">
      <a href="#">登录</a>
      <a href="#">注册</a>
      <a href="#">电脑版</a>
      <a href="#">会员商城</a>
    </div>
    <div class="copy_right">
      © 360.com 奇虎360 京ICP备08010314号-6
    </div>
  </div>
</body>
<script src="./lib/swiper/js/swiper.min.js"></script>
<script>
  window.onload = function () {
    init();
    function init() {
      initSwiper();
      eventList();
    }
    function eventList() {
      document.querySelector(".header_menu").onclick = function () {
        document.querySelector(".main_menu").classList.toggle("hidden");
      }

    }
    function initSwiper() {
      var mySwiper = new Swiper('.swiper-container', {
        loop: true,
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: {
          disableOnInteraction: false
        }
      })
    }
  }
</script>

</html>